<template>
  <div class="myHeader">
    <i class="myicon myicon-menu toggle-btn" @click="toggleCollapse"></i>
    <div class="system-title">电商后台管理系统</div>
    <div>
      <span class="welcome">
        您好，{{getUserName}}
      </span>
      <el-button type="text" @click="logout">退出</el-button>
    </div>
  </div>
</template>

<script>
import  {mapGetters} from 'vuex'

export default {
  name: "",
  data() {
    return {
      isCollapse: false
    };
  },
  watch: {},
  props: {},
  components: {},
  computed: {
        ...mapGetters(['getUserName'])
  },
  mounted() {},
  methods: {
    async logout() {
      try {
        let res = await this.$confirm("确认是否退出?", "", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).catch(err => {
          throw new Error("我错了");
        });

        if (res != "confirm") return;
        window.localStorage.removeItem("tokenLogin");
        this.$router.push("/login");
      } catch (error) {}
    },

    toggleCollapse() {
      // this.isCollapse = !this.isCollapse
      this.$store.commit('changeCollapse')
    }
  },
  filters: {}
};
</script>

<style scoped lang="scss">
.myHeader {
  display: flex;
  align-items: center;
  .system-title {
    flex: 1;
  }

  .toggle-btn {
    font-size: 30px;
    cursor: pointer;
  }
}
</style>
